<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VinculaEntorno</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/formhelpers.css" %}">  
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
</head>

<body>
	{% include "topmenu.html" %}
	
	<div class="container"> <!-- Container -->
		<div class="row-fluid"><!-- SECCION DE REGISTROS -->
			{% include "sidebar.html" %} <!-- Side bar -->

			<div class="span9">
				<div class="row-fluid"> <!-- SECCION DE REGISTROS -->
					{% if show_message_success %}
		                <div class="alert alert-success">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							{{mensaje_exito|safe}}                
		                </div>
		            {% endif %}
		            {% if show_message_error %}
		            	<div class="alert alert-error">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							{{mensaje_error|safe}}                
		                </div>
		            {% endif %}
				</div>
				<div class="row-fluid"> <!-- SECCION DE REGISTROS -->
					<div class="span6"> <!-- SECCION FORMULARIO DE REGISTRO PARA EL USUARIO -->
						<div class="page-header" align="center"> <!-- Titulo seccion registro de usuario-->
							<h1>Paso 1</h1>
							<p>Inscribete al administrador de la universidad</p>
						</div> <!-- /Titulo seccion registro de usuario-->
					</div>

					<div class="page-header" align="center"> <!-- Titulo seccion registro de universidades-->
						<h1>Paso 2</h1>
						<p>Inscribe a la Universidad</p>
					</div> <!-- /Titulo seccion registro de universiades -->
				</div>

                <small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>
				<small><p><b>El user creado quedará registrado como administrador de la universidad.</b></small>

				<!-- FORMULARIO DE REGISTRO -->
				<form action="/plataforma/universidades/validar_formulario_universidad_user/" method="POST" name="agregarUniv" class="form-horizontal well" id="agregarUniv"> 
					{% csrf_token %}
					<div class="row-fluid">
						<div class="span6"> <!-- SECCION FORMULARIO DE REGISTRO PARA EL USUARIO -->					
							<!-- FORULARIO DE REGISTRO DE UNSUARIOS -->
							<div class="control-group"> <!-- Nombre -->
								<label for="nombre" class="control-label"><b>Nombre</b></label>
								<div class="controls">
									<input type="text" name="nombre_admin_univ" id = "nombre_admin_univ">
								</div> 
							</div> <!-- /Nombre -->

		                    <div class="control-group"> <!-- Apellido -->
								<label for="apellido" class="control-label"><b>Apellido</b></label>
								<div class="controls">
									<input type="text" name="apellido_admin_univ" id = "apellido_admin_univ">
								</div>
							</div> <!-- /Apellido -->

							<div class="control-group"> <!-- Email -->
								<div>
									<div>
										<label for="mail" class="control-label"><b>E-mail*</b></label>
										<div class="controls">
											<input type="email" name="email_admin_univ" placeholder="ejemplo@ejemplo.com" id = "email_admin_univ" onBlur="javascript:ajax_message_email(event)">
										<div class="correoAlert"></div>
										<div class="result_email"></div>
										</div>
									</div>
									
								</div>
							</div> <!-- /Email -->

							<div class="control-group"> <!-- Password -->
								<label for="password" class="control-label"><b>Contraseña*</b></label>
								<div class="controls">
										<input type="password" name="password_admin_univ" id = "password_admin_univ" onBlur="javascript:passwordControl(event)">
								<div class="passAlert"></div>

								</div>
							</div>  <!-- /Password -->

							<div class="control-group"> <!-- Confirmacion Password-->
								<label for="confirmacion" class="control-label"><b>Confirmar Contraseña*</b></label>
								<div class="controls">
										<input type="password" name="confirmacion_admin_univ" id = "confirmacion_admin_univ" onBlur="javascript:passwordControl(event)">
								<div class="passwordControlAlert"></div>
								<div class="confirmAlert"></div>
								</div>
							</div> <!-- /Confirmacion Password-->
						</div> <!-- /FORULARIO DE REGISTRO DE UNSUARIOS -->


						<div class="span6" id="Span6Form"> <!-- SECCION FORMULARIO DE REGISTRO PARA UNIVERSIDADES -->
							<!-- FORULARIO DE REGISTRO DE UNIVERSIDADES -->	
							<div class="control-group"> <!-- Nombre -->
								<label for="nombre" class="control-label"><b>Nombre*</b></label>
								<div class="controls"> 
									<input type="text" name="nombreUniv_admin_univ" id = "nombreUniv_admin_univ" value = "{{nombre}}">
								<div class="nombreUnivAlert"></div>
								</div>
							</div> <!-- /Nombre -->

							<div class="control-group"> <!-- Telefono -->
	                            <label for="telefono" class="control-label"><b>Teléfono</b></label>
	                            <div class="controls">
	                                <input type="text" name="cod_pais_admin_univ" id = "cod_pais_admin_univ" value="{{cod_pais}}" placeholder="Cod.País">
	                                <input type="text" name="cod_ciudad_admin_univ" id = "cod_ciudad_admin_univ" value="{{cod_ciudad}}" placeholder="Cod. Área"><br />
	                                <input type="text" name="telefono_admin_univ" id = "telefono_admin_univ" value="{{telefono}}" placeholder="Num. Tel.">
                                </div>
		                    </div> <!-- /Telefono -->

							<div class="control-group"> <!-- Url -->
								<label for="url" class="control-label"><b>Url*</b></label>
								<div class="controls">
									<input type="text" name="url_admin_univ" id = "url_admin_univ" value = "{{url}}" placeholder="www.ejemplo.com" onBlur="javascript:ajax_message_url(event)">
								<div class="result_url"></div>
								</div>
							</div> <!-- /Url -->

							<div class="control-group"> <!-- Siglas -->
								<label for="siglas" class="control-label"><b>Siglas</b></label>
								<div class="controls">
									<input type="text" name="siglas_admin_univ" id = "siglas_admin_univ" value = "{{siglas}}">
								</div>
							</div> <!-- /siglas -->

							<div class="control-group"> <!-- Direccion -->
								<label for="direccion" class="control-label"><b>Dirección</b></label>
								<div class="controls">
									<input type="text" name="direccion_admin_univ" id = "direccion_admin_univ" value = "{{direccion}}">
								</div>
							</div> <!-- /Direccion -->

							<div class="control-group"> <!-- Pais -->
								<label for="pais" class="control-label"><b>País*</b></label>
								<div class="controls">
									<select name="pais_admin_univ"  id = "pais_admin_univ" onBlur="javascript:message_paises(event)">
										<option value="">| Elije un pais |</option>
										{% for nombre, codigo in lista_sinc_paises %}
											<option value="{{ nombre }}">{{ codigo }}</option>
										{% endfor %}
									</select>
									<div class="paisAlert"></div>
								</div>
							</div> <!-- /Pais -->

							<div class="control-group">
								<div class="controls">
									<input type="hidden" name="id" id = "id" value= 99999 required>
								</div>
							</div> <!-- ID -->
							<!-- /FORMULARIO DE REGISTRO DE UNIVERSIDADES -->
						</div><!--span6-->
					</div>

					<!-- BOTON DE REGISTRO -->
					<div class="form-actions", align="center">
						<center><button type="submit" class="btn btn-primary" onCLick="javascript:myfunc(event)">Enviar Datos</button></center>
					</div> <!-- /BOTON DE REGISTRO -->

				</form> <!-- /FORULARIO DE REGISTRO -->
			</div> <!--span9-->
		</div>


	{% include "footer.html" %} <!-- Footer -->
	</div> <!-- Container -->

	<!-- JS files -->
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
<script>
	function passwordControl(event){
		if ($("#confirmacion_admin_univ").val() != $("#password_admin_univ").val()) {
		 		$(".passwordControlAlert").html("<div class='alert alert-error'>Verifique password y la confirmacion, no coinciden.</div>");
		 		return false;
		}else{
				$(".passwordControlAlert").html("<div class='alert alert-success'>La Contraseña es válida.</div>");
		}
	}
	//***********************
	function myfunc(event){
		//Control de los campos required
		if($("#email_admin_univ").val() == ""){
			$(".correoAlert").html("<div class='alert alert-error'>Ingrese correctamente un email.</div>");
			event.preventDefault();
		}
		if($("#password_admin_univ").val() == ""){
			$(".passAlert").html("<div class='alert alert-error'>Ingrese la Contraseña.</div>");
			event.preventDefault();
		}
		if($("#confirmacion_admin_univ").val() == ""){
			$(".confirmAlert").html("<div class='alert alert-error'>Confirme la Contraseña correctamente.</div>");
			event.preventDefault();
		}	
	 	if($("#nombreUniv_admin_univ").val() == ""){
			$(".nombreUnivAlert").html("<div class='alert alert-error'>Ingrese nombre para la universidad.</div>");
			event.preventDefault();
		}
		if($("#url_admin_univ").val() == ""){
			$(".result_url").html("<div class='alert alert-error'>Ingrese correctamente una dirección web.</div>");
			event.preventDefault();
		}
		
		if ($("#pais_admin_univ").val() == ""){
		 	$(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
		 	event.preventDefault();

		 }

	}
	//***********************
	//Se vacian los div de los alert
	$("#email_admin_univ").blur(function(){
		if($("#email_admin_univ").val() != ""){
			$(".correoAlert").html("");
		}	
	});
	$("#password_admin_univ").blur(function(){
		if($("#password_admin_univ").val() != ""){
			$(".passAlert").html("");
		}
	});
	$("#confirmacion_admin_univ").blur(function(){
		if($("#confirmacion_admin_univ").val() != ""){
			$(".confirmAlert").html("");
		}
	});
	$("#nombreUniv_admin_univ").blur(function(){
		if($("#nombreUniv_admin_univ").val() != ""){
			$(".nombreUnivAlert").html("");
		}
	});
	/*$("#url_admin_univ").blur(function(){
		if($("#url_admin_univ").val() != ""){
			$(".urlAlert").html("");
		}
	});*/
		
	$("#pais_admin_univ").blur(function(){
	 	if($("#pais_admin_univ").val() != ""){
	 		$(".paisAlert").html("");
	 	}
	});
	//***********************
	function message_paises(){
		if ($("#pais_admin_univ").val() == ""){
		 	$(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
		 }else{
		 	$(".paisAlert").html("");
		 }
	}
	//***********************
	function ajax_message_email() {
	    $(".result_email").html("");
	    email = $("#email_admin_univ").val();
	    if((email != "") && validateEmailFormat(email)){
		    $.ajax({
		       type: "POST",
		       url: "/plataforma/universidades/ajax_message_email/",
		       data: {'email': email},
		       cache: false,
		       success: function(returndata){
		       	if(returndata.tipo == "error")
		            $(".result_email").html("<div class='alert alert-error'>"+returndata.message+"</div>");
		        else if(returndata.tipo == "exito")
		         	$(".result_email").html("<div class='alert alert-success'>"+returndata.message+"</div>");

		       }
		    });
		}else{
			 $(".result_email").html("<div class='alert alert-error'>Ingrese un correo válido para el user.</div>");
		}
	}
	//***********************
	function ajax_message_url() {
	    $(".result_url").html("");
	    url = $("#url_admin_univ").val();
	    if((url != "") && validateUrlFormat(url)){
		    $.ajax({
		       type: "POST",
		       url: "/plataforma/universidades/ajax_message_url/",
		       data: {'url': url},
		       cache: false,
		       success: function(returndata){
				             if(returndata.tipo == "error")
				             	$(".result_url").html("<div class='alert alert-error'>"+returndata.message+"</div>");
				             else if(returndata.tipo == "exito")
				             	$(".result_url").html("<div class='alert alert-success'>"+returndata.message+"</div>");
				       }
		    });
		}else if(!validateUrlFormat(url)){
			$(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
		}
	}
	//*************************
	function validateEmailFormat(email) { 
	    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	    return re.test(email);
	}
	//*************************
	function validateUrlFormat(url) { 
	    var re = /^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/|www\.)[a-zA-Z0-9\-]+(?:\.[a-zA-Z0-9\-]+)*\.[a-zA-Z]{2,6}(?:\/?|(?:\/[\w\-]+)*)(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$/;
	    return re.test(url);
	}

</script>

</body>
</html>
